Relation map is a type of note which visualizes notes and their relations.

Interaction

• To create a new note and add it to the map, press the Add note button at the bottom of the map, then click anywhere on the map to place it there.
  • While the map waits for the click, a translucent box follows the mouse to show where the note will go. To cancel, press the button again (now labeled Cancel) or press Esc.
  • The note is created as a child of the map, with the default title of a new note. It opens in the note panel (see below) with its title selected, so you can type its name straight away.
• An existing note can also be dragged from the Note Tree. It will be placed at the position it's dragged on.
  • Multiple notes can also be dragged via Multiple selection. The notes will be positioned near the dragged position without overlapping.
  • The dragged note can be a sub-child of the map, or it can be at any arbitrary position.
• Notes can also be pasted onto the map. Copy or cut them in the Note Tree, then click the map and press Ctrl+V, or right click an empty part of the map and select Paste note(s).
  • With Ctrl+V, the notes are placed under the mouse, or in the middle of the map if the mouse is not over it. From the right click menu, they are placed where the menu was opened.
  • Copied notes stay where they are in the tree. Cut notes are moved under the map, as if they had been pasted into it in the tree.
  • Links to notes, such as an Internal (reference) links copied from a text note, can be pasted the same way. If the clipboard holds no link to a note, the notes last copied or cut in the tree are pasted.
  • The right click menu of an empty part of the map also has Add note, which creates a new note where the menu was opened.
• To create a relationship, hold the mouse on the dot on the right of a note and then:
  • Drag it over another note to create a relationship pointing from the first note to the second one.
  • Drag over the same note to create a self-referencing relationship (represented as a loop).
  • Once dragged, a popover next to the relationship asks for its name. Type a new name and press Enter, or pick a relation name already in use from the suggestions. To cancel, press Esc, close the popover or click elsewhere on the map.
• Each note is shown as a card with its icon and title, colored in the note's color the same way as the cards of a Kanban Board.
• Hovering a note highlights its relationships, in the note's color if it has one, and fades the other relationships.
• To view or edit a note, click it on the map. This opens the note panel (see below).
  • To open the note in a new tab instead, Ctrl+click it or click it with the middle mouse button. Shift+click opens it in a new window. The right click menu offers the same options.
• To edit the title of a note, change its color or delete it (either from the map, or delete it completely), right click the note.
• To rename or delete a relationship, right click it and select the corresponding option.
• On a read-only map, notes cannot be moved and relationships cannot be drawn, renamed or deleted. The right click menu of a note only offers to open it, and a relationship has no right click menu.
• To move around the map, drag an empty part of it, and zoom with the mouse wheel or the buttons at the bottom-right corner. Clicking the zoom percentage goes back to 100%, and Fit to view zooms and pans so that all the notes are visible.
  • Once the map has been clicked, the arrow keys or W A S D pan it, and + and - zoom it. The ? button at the top-right corner of the map lists all its keyboard shortcuts.

Note panel

When a note on the map is clicked, a panel opens to the right of the map and the note is highlighted. If the panel would cover the note, or the note is partly off-screen, the map pans to bring it into view. The panel contains:

• The title and icon of the note, both editable.
• A button to expand the panel over the whole map, and to restore it afterwards.
• Buttons to interact with the note:
  • Open the note in the current tab, or, through the menu, in a new tab, split, window or the quick edit popup.
  • A color picker to change the color of the note.
  • A button to remove the note from the map, which can optionally delete the note as well.
• The Promoted Attributes of the note, if any.
• The note's content, which can be edited directly from the panel.

The color picker and the remove button are not shown if the map is read-only.

Clicking another note on the map switches the panel to it. Similarly, clicking an Internal (reference) links inside the panel switches the panel to that note, as long as it is on the map.

To close the panel, press the X button at its top-right, click an empty part of the map, or press Esc.

On mobile, the note opens as a dialog over the whole screen instead of a panel.

Development process demo

This is a basic example how you can create simple diagram using relation maps:

And this is how you can create it:

We start completely from scratch by first creating new note called "Development process" and changing its type to "Relation map". After that we create new notes one by one and place them by clicking into the map. We also drag relationsbetween notes and name them. That's all!

Items on the map - "Specification", "Development", "Testing" and "Demo" are actually notes which have been created under "Development process" note - you can click on them and write some content. Connections between notes are called "relations".

Family demo

This is more complicated demo using some advanced concepts. Resulting diagram is here:

This is how you get to it:

There are several steps here:

• we start with empty relation map and two existing notes representing Prince Philip and Queen Elizabeth II. These two notes already have isPartnerOf relationsdefined.
  • There are actually two "inverse" relations (one from Philip to Elizabeth and one from Elizabeth to Philip)
• we drag both notes to relation map and place to suitable position. Notice how the existing isPartnerOf relations are displayed.
• now we create new note - we name it "Prince Charles" and place it on the relation map by clicking on the desired position. The note is by default created under the relation map note (visible in the note tree on the left).
• we create two new relations isChildOf targeting both Philip and Elizabeth
  • now there's something unexpected - we can also see the relation to display another hasChild relation. This is because there's a relation definition which puts isChildOf as an "inverse" relation of hasChildOf (and vice versa) and thus it is created automatically.
• we create another note for Princess Diana and create isPartnerOf relation from Charles. Again notice how the relation has arrows both ways - this is because isPartnerOf definition specifies its inverse relation as again "isPartnerOf" so the opposite relation is created automatically.
• as the last step we pan & zoom the map to fit better to window dimensions.

Relation definitions mentioned above come from "Person template" note which is assigned to any child of "My Family Tree" relation note. You can play with the whole thing in the demo notes.

Details

You can specify which relations should be displayed with comma delimited names of relations in displayRelations label.

Alternatively, you can specify comma delimited list of relation names in hideRelations which will display all relations, except for the ones defined in the label.

See also

• Note Map is a similar concept.